<template>
  <div>
    <div class="opt-area-02">
      <div class="right-con">
        <div class="input-frame" style="width: 164px">
          <Input type="text" @on-click="init()" placeholder="请输入企业名称" style="width: 164px" v-model="params.qy_name" icon="ios-search" />
        </div>
          <Button type="info" size="small" @click="selectlist(1)" style="margin-top: 5px;margin-right:5px">搜索</Button>
          <Button type="info" class="button-in" @click="saveEnterprise()" size="small" >添加企业信息</Button>
        </div>
      </div>
    <div>
      <Table :columns="columns1" border :data="data1" size="small">
        <template slot-scope="{ index }" slot="index">
          <strong>{{ index + 1 }}</strong>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="info" size="small" style="margin-right: 5px" @click="detail(row)">详情</Button>
          <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
          <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
        </template>
      </Table>
      <Row
        type="flex"
        justify="end"
        class="page_style"
      >
        <Page
          :current="params.pageNo"
          :total="params.totalRecord"
          show-sizer
          :page-size="params.pageSize"
          show-total
          @on-change="pageAction"
          @on-page-size-change="pageSizeChange"
        />
      </Row>
    </div>
    <Drawer title="企业信息" v-model="modal1" width="420" :styles="styles">
        <Form :model="formData">
            <Row :gutter="32">
                <Col span="24">
                    <FormItem label="企业名称" label-position="top">
                      <Input v-model="formData.qy_name" placeholder="请填写企业名称" :disabled="what == 'info'" />
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col span="24">
                    <FormItem label="企业联系人" label-position="top">
                      <Input v-model="formData.qy_lxr" placeholder="请填写企业联系人" :disabled="what == 'info'" />
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col span="24">
                    <FormItem label="企业电话" label-position="right">
                      <Input v-model="formData.qy_tel" placeholder="请填写企业电话" :disabled="what == 'info'" />
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="modal1 = false">取消</Button>
            <Button type="primary" @click="submit(what)" :disabled="what == 'info'">提交</Button>
        </div>
    </Drawer>
  </div>
</template>

<script>
import { findEnterpriseInfoList, saveEnterpriseInfo, updateEnterpriseInfo, deleteEnterpriseInfo } from '@/api/yi-qing-fang-kong'
export default {
  name: 'community-list',
  data () {
    return {
      formData: {},
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      columns1: [
        {
          title: '序号',
          width: 60,
          slot: 'index',
          align: 'center'
        },
        {
          title: '企业名称',
          key: 'qy_name',
          align: 'center'
        },
        {
          title: '企业联系人',
          key: 'qy_lxr',
          align: 'center'
        },
        {
          title: '企业电话',
          key: 'qy_tel',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ],
      params: {
        qy_name: '',
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      data2: {
        village_name: '',
        floor_num: '',
        id: '',
        del_flag: ''
      },
      data1: [],
      modal1: false,
      modal2: false,
      what: ''
    }
  },
  computed: {},
  watch: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      findEnterpriseInfoList(this.params).then((ret) => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    selectlist (inpageNo) {
      if (inpageNo) {
        this.params.pageNo = inpageNo
      } else {
        this.params.pageNo = 1
      }
      this.params.totalRecord = 0
      this.init()
    },
    saveEnterprise () {
      this.formData = {}
      this.modal1 = true
      this.what = 'add'
    },
    detail (item) { // 详情
      this.modal1 = true
      this.formData.qy_name = JSON.parse(JSON.stringify(item.qy_name))
      this.formData.qy_lxr = item.qy_lxr
      this.formData.qy_tel = item.qy_tel
      this.what = 'info'
    },
    edit (item) {
      this.modal1 = true
      this.formData.qy_name = JSON.parse(JSON.stringify(item.qy_name))
      this.formData.qy_lxr = item.qy_lxr
      this.formData.qy_tel = item.qy_tel
      this.formData.id = item.id
      this.what = 'edit'
    },
    upModal2 (param) {
      this.modal2 = true
      this.data2.village_name = param.village_name
      this.data2.floor_num = param.floor_num
      this.data2.id = param.id
      this.data2.del_flag = param.del_flag
    },
    submit (what) { // 保存企业信息
      var url = ''
      if (what === 'add') {
        url = saveEnterpriseInfo
      } else if (what === 'edit') {
        url = updateEnterpriseInfo
      }
      url(this.formData).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '保存成功'
          })
          this.modal1 = false
          this.init()
        } else {
          this.$Notice.error({
            title: '保存失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    ok2 () {
      updateEnterpriseInfo(this.data2).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '修改成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    deleteRow (item) {
      if (confirm('确认删除')) {
        deleteEnterpriseInfo({ id: item.id }).then((ret) => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({
              title: '删除成功'
            })
            this.init()
          } else {
            this.$Notice.error({
              title: '删除失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init(this.params.pageNo)
    }
  }
}
</script>

<style scoped>
.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.button-in {
  width: 100px;
  margin-top: 5px;
}

.opt-area-02 .right-con .input-frame {
  width: 100%;
  margin-right: 10px;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
